<template>
  <div id="app">
    <!-- 顶部 -->
    <TopBar></TopBar>

    <!-- 头部导航栏 -->
    <Header></Header>

    <!-- 路由切换内容 -->
    <router-view />

    <!-- 底部页面 -->
    <Footer></Footer>

    <!-- 登录框 -->
    <Login v-if="isShowLoginModel"></Login>
  </div>
</template>

<script>
  // 组件相关 
  import TopBar from '@/components/app/TopBar.vue'
  import Header from '@/components/app/Header.vue'
  import Footer from '@/components/app/Footer.vue'
  import Login from '@/components/app/Login.vue'

  // vuex相关
  import { mapState } from 'vuex'

  export default {
    name: '',
    components: {
      TopBar,
      Header,
      Footer,
      Login
    },
    props: {

    },
    data() {
      return {

      };
    },
    computed: {
      ...mapState({
        isShowLoginModel: state => state.isShowLogin.isShowLoginModel
      })
    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
  };
</script>

<style scoped lang="less">

</style>